<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
</head>

<body style="overflow: hidden;width: 100%;overflow-y: auto">
<!--导航栏-->
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl shadow">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mx-5 pr-5 text-primary" href="/index">Community</a>
    <div class="collapse navbar-collapse  row">
        <div class="offset-10 offset-sm-10 offset-md-10 offset-lg-10 offset-xl-10">
            <ul class="navbar-nav ">
                <a class="nav-item nav-link mx-4 mt-2 " href="/person" th:if="${avatar} == null">个人</a>
                <a class="nav-item nav-link mx-4" href="/person" th:if="${avatar} != null"><img th:src="${avatar}"
                                                                                                style="height: 45px;width: 45px"
                                                                                                class="rounded-circle"></a>
                <!--                注销使用带有a样式的button-->
                <a class="btn btn-link nav-link ml-2 mt-2 " data-toggle="modal" data-target="#logoutmodal">注销</a>
            </ul>
        </div>
    </div>
</nav>

<!--主要个人信息-->
<div class="container ">
    <!--    错误提示框-->
    <div class="alert alert-warning alert-dismissible fade show mt-3" role="alert" th:if="${signal} == 1">
        <strong>出问题啦！</strong> <span th:text="${error}"> 您还未登录哦~</span><a href="/login">点击登录</a>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 mx-auto" th:if="${signal} != 1">
            <!--        个人详情-->
            <div class="card mb-3">
                <!--            封面-->
                <!--                背景局部刷新-->
                <div th:fragment="coverPicFragment" id="coverPicFragment">
                    <div th:style="'background:url('+${user.coverPic}+')'+ '; background-position: center center' + '; background-repeat: no-repeat' +'; background-size: cover' + '; height:180px'"
                         class="card-header">
                        <!-- 上传图片 trigger -->
                        <button type="button" class="btn btn-link offset-11  text-primary " data-toggle="modal"
                                data-target="#picmodal">
                            编辑
                        </button>
                    </div>
                </div>
                <!--            头像和个人信息-->
                <div class="row">
                    <!--                    头像局部刷新-->
                    <div th:fragment="avatarFragment" id="avatarFragment">
                            <img th:src="${user.avatar}" class="card-img-top img-thumbnail" style="height:110px; width: 110px">
                    </div>

                    <!--                    个人信息-->
                    <div class="card-body col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                        <hr>
                        <!--                        昵称-->
                        <div class="my-3">
                            <small class="text-info">昵称</small>
                            <!--                            不展示输入框-->
                            <p th:text="${user.nickName}" ></p>
                            <hr>
                        </div>
                        <!--                        性别选项-->
                        <small class="text-info">性别</small>
                        <div class="mt-1" th:if="${user.sex} != null">
                            <p th:text="${user.sex}" ></p>
                        </div>
                        <hr>
                        <!--                        签名-->
                        <div class="mt-4 mb-3">
                            <small class="text-info">编写属于你的个性签名</small>
                            <p th:text="${user.introduction}" class="mt-1"></p>
                            <hr>
                        </div>

                        <!--                        专业-->
                        <div class="my-3">
                            <small class="text-info">你的专业</small>
                            <p th:text="${user.subject}" class="mt-1">
                            <hr>
                        </div>
                        <!--                        年级-->
                        <div class=" my-3">
                            <small class="text-info">你的年级</small>
                            <p th:text="${user.year}" class="mt-1">
                            <hr>
                        </div>
                        <button  class="btn-primary btn-block mt-2"  data-toggle="modal" data-target="#homeInfo">编辑个人信息</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<!-- 头像背景模态框，需要按钮触发-->
<div class="modal fade" id="picmodal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">更换头像/背景</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!--                头像和背景表单-->
            <div class="modal-body">
                <div class="form-group">
                    <label class="text-info font-weight-bold" for="avatar">头像</label>
                    <input type="file" id="avatar" name="avatar" accept="image/*">
                </div>
                <div class="form-group">
                    <label class="text-info font-weight-bold" for="coverPic">背景</label>
                    <input type="file" id="coverPic" name="coverPic" accept="image/*">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary close" data-dismiss="modal" aria-label="Close"
                        onclick="homeCoverUpload();homeAvatarUpload()">提交
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 注销模态框，需要按钮触发-->
<div class="modal fade" id="logoutmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--                <h5 class="modal-title" id="exampleModalLabel"></h5>-->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="font-weight-bold text-danger">您确定要注销当前账户吗</p>
            </div>
            <div class="modal-footer">
                <form action="/logout" method="get">
                    <button type="submit" class="btn btn-primary">确定</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!--个人信息模态框-->
<div class="modal fade" id="homeInfo" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" >编辑个人信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="/home" method="post">
                    <div class="form-group">
                        <label for="nickName">昵称</label>
                        <input type="text" id="nickName" class="form-control" name="nickName" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label for="introduction">个性签名</label>
                        <input type="text" id="introduction" name="introduction" class="form-control" autocomplete="off">
                    </div>
                    <div class="form-group">
                    <label for="sex">性别</label>
                    <select class="custom-select" id="sex" name="sex" required>
                        <option selected disabled value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    </div>
                    <div class="form-group">
                        <label for="subject">专业</label>
                        <input type="text" id="subject" name="subject" class="form-control" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label for="year">学年</label>
                        <input type="text" id="year" name="year" class="form-control" autocomplete="off">
                    </div>
                    <button type="submit" class="btn btn-primary">保存信息</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
    // 上传用户头像
    function homeAvatarUpload() {
        var avatar = $("#avatar")[0].files[0];
        var avatarData = new FormData();
        avatarData.append("avatar", avatar);
        debugger
        $.ajax({
            url: "/homeAvatarUpLoad",
            type: "post",
            data: avatarData,
            processData: false,
            contentType: false,
            success(data) {
                $("#avatarFragment").html(data);
            }
        });
    }

    // 上传用户背景
    function homeCoverUpload() {
        var coverPic = $("#coverPic")[0].files[0];
        var coverData = new FormData();
        coverData.append("coverPic", coverPic);
        debugger
        $.ajax({
            url: "/homeCoverUpLoad",
            type: "post",
            data: coverData,
            processData: false,
            contentType: false,
            success(data) {
                $("#coverPicFragment").html(data);
            }
        });
    }
</script>
</body>
</html>